<template>
  <div>
    <div class="content">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名" class="form-header">
          <el-select v-model="formInline.userId" placeholder="请选择" class="slect" :disabled="isEdit">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频类组件" class="form-header">
          <el-input v-model="formInline.videoComponents" placeholder="视频类组件"></el-input>
        </el-form-item>
        <el-form-item label="投放设备" class="form-header">
          <el-select v-model="formInline.promotionDevice" placeholder="投放设备" class="slect">
            <el-option v-for="item in ['移动', '计算机']" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投放范围" class="form-header">
          <el-input v-model="formInline.range" placeholder="投放范围"></el-input>
        </el-form-item>
        <el-form-item label="状态" class="form-header">
          <el-select v-model="formInline.status" placeholder="请选择" class="slect">
            <el-option v-for="item in ['有效']" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="消费" class="form-header">
          <el-input v-model="formInline.consumption" placeholder="消费"></el-input>
        </el-form-item>
        <el-form-item label="展现" class="form-header">
          <el-input v-model="formInline.toShow" placeholder="展现"></el-input>
        </el-form-item>
        <el-form-item label="点击" class="form-header">
          <el-input v-model="formInline.click" placeholder="点击"></el-input>
        </el-form-item>
        <el-form-item label="点击区域" class="form-header">
          <el-select v-model="formInline.clickRegion" placeholder="请选择" class="slect">
            <el-option v-for="item in ['整个广告','仅限组件']" :key="item" :label="iteml" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推广类型" class="form-header">
          <el-select v-model="formInline.promotionType" placeholder="请选择推广类型" class="slect">
            <el-option
              v-for="item in [
                { value: '1', label: '推广业务' },
                { value: '2', label: '营销目标' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" class="form-header">
          <el-date-picker
            v-model="formInline.createTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="queding">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button type="primary" plain @click="$emit('handleCancle')">取消</el-button>
    </div>
  </div>
</template>
<script>
import { listAllUser } from "@/api/caiwu/zhgl";
import { add, edit } from "@/api/sstg/cysp";
import { mapState } from "vuex";
export default {
  name: "zhanghugai",
  data() {
    return {
      formInline: {
        userId: "",
        videoComponents: "",
        range: "",
        status: "",
        consumption: "",
        toShow: "",
        click: "",
        promotionType: "",
        createTime: "",
        promotionDevice: "",
        clickRegion: ""
      },
      userList: []
    };
  },
  computed: {
    ...mapState(["user"])
  },
  props: {
    // 编辑数据
    objData: {
      type: Object,
      default: () => {}
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    // 根据用户角色判断当前用户是否管理员角色，是则可下拉选择全量用户，否则是普通用户，使用当前用户id
    if ("admin".includes(this.user.roles)) {
      this.getList();
      this.formInline.userId = this.user.id;
    }
    // 是否是编辑
    if (this.isEdit) {
      this.formInline = this.objData;
    } else {
      this.resetForm();
    }
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      listAllUser({}).then(res => {
        res.data.forEach(item => {
          this.userList.push({
            userName: item.userName,
            userId: item.userId
          });
        });
      });
    },
    // 新增、编辑提交
    handleSubmit() {
      let apiUrl = this.isEdit ? edit : add;
      // let params = this.isEdit
      //   ? {
      //       ...this.formInline,
      //       trendsId: this.objData.trendsId,
      //     }
      //   : this.formInline;
      apiUrl(this.formInline).then(res => {
        if (res.code === 200) {
          this.$emit("handleCancle");
        }
      });
    },
    // 重置表单
    resetForm() {
      this.formInline = {
        userId: this.user.id,
        videoComponents: "",
        range: "",
        status: "",
        consumption: "",
        toShow: "",
        click: "",
        promotionType: "",
        createTime: "",
        promotionDevice: "",
        clickRegion: ""
      };
    }
  }
};
</script>
<style scoped>
.queding {
  padding-bottom: 28px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  width: 34%;
  margin: 0 auto;
}
.form-header {
  width: 492px;
  border: none;
}
.slect {
  width: 204px;
}
.content {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
}
</style>
